import Icon from "@ant-design/icons";
import {DownIcon, UpIcon} from "../../components/DragDiv";
import React, {CSSProperties, FC} from "react";

export const ArrowCommonStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  background: 'rgb(183,183,183)'
}
export type ArrowIconProps = {
  setBool: (value: (((prevState: boolean) => boolean) | boolean)) => void,
  bool: boolean,
  extStyle: CSSProperties,
  icon1: () => JSX.Element,
  icon2: () => JSX.Element,
}

export const ArrowIcon: FC<ArrowIconProps> = (props: ArrowIconProps) => {
  const {setBool, extStyle, bool, icon1, icon2} = props
  return <div style={{
    ...ArrowCommonStyle,
    ...extStyle,
  }} onClick={() => setBool(!bool)}
  >
    <Icon className={'icon'} component={bool ? icon1 : icon2} style={{fontSize: 15}}/>
  </div>;
};
